<template>
    <div class="header">
        <div class="logo-wrapper">
            <img width="60" height="60" src="./logo.jpg"><span>萝卜药店</span>
        </div>
        <div class="tab">
            <div class="tab-item">
                <router-link to="/home">
                    <i class="el-icon-s-home"></i> 首页
                </router-link>
            </div>
            <div class="tab-item">
                <router-link to="/store">
                    <i class="el-icon-shopping-cart-1"></i> 药品
                </router-link>
            </div>
            <div class="tab-item">
                <router-link to="/search">
                    <i class="el-icon-search"></i> 搜索
                </router-link>
            </div>
        </div>
        <div class="login">
            <el-button type="text">登录</el-button><el-button type="text">注册</el-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .header{
        position: relative;
        width 100%
        height 60px
        .logo-wrapper{
            position absolute
            top 0
            left 20px
            width 300px
            height 50px
            padding 5px
            img{
                display inline-block
                vertical-align top
                width 50px
                height 50px
            }
            span{
                display inline-block
                font-size 25px
                font-weight 700
                font-family "微软雅黑", Arial, sans-serif
                line-height 50px
                padding-left 10px
            }
        }
        .tab{
            display flex
            justify-content center
            width 800px
            height 60px
            margin 0 auto
            box-shadow 0 0 20px darkgrey
            .tab-item{
                display inline-block
                width 100px
                height 40px
                margin 9px 8px
                line-height 40px
                text-align center
                a{
                    display block
                    border-radius 5px
                    color gray
                    font-weight 500
                    &.active{
                        background #007bff
                        color white
                    }
                }
            }
        }
        .login{
            position absolute
            top 0
            right 20px
            line-height 60px
        }
    }
</style>
